<template>
  <div class="wft-w-h-100">
    <van-tabbar
      v-model="active"
      :inactive-color="(curComp.attrs as unknown as any).tabBar.color"
      :active-color="(curComp.attrs as unknown as any).tabBar.selectedColor"
      :safe-area-inset-bottom="true"
      style="width: 100%;transform: translateX(-0.6px)"
    >
      <van-tabbar-item
        v-for="(item, index) in (curComp.attrs as unknown as any).tabBar.list"
        :key="index"
        :style="{ backgroundColor: (curComp.attrs as unknown as any).tabBar.backgroundColor, fontSize: (curComp.attrs as unknown as any).tabBar.fontSize + 'px' }"
        icon="home-o"
      >{{ item.text }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const active = ref(0)

defineProps<{
  curComp: TComp
}>()

</script>
<style scoped>
.wft-w-h-100 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.van-tabbar--fixed) {
  position: absolute;
}
</style>
